<template>
  <div align="center">
    <h1>客户信息表</h1>
    <table border="1" cellspacing="0">
      <tr>
        <td>公司名称</td>
        <td>主营业务</td>
        <td>地区</td>
        <td>联系人</td>
        <td>联系人职务</td>
        <td>联系人电话</td>
        <td>联系人性别</td>
        <td>传真号码</td>
        <td>银行账号</td>
        <td>邮政编码</td>
        <td>公司规模</td>
        <td>职务员</td>
        <td>客户状态</td>
        <td>加入时间</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in data">
        <td v-for="q in data1" v-if="q.id==i.company_name">{{ q.company_name }}</td>
        <td>{{ i.business }}</td>
        <td v-for="w in data3" v-if="w.id==i.region">{{ w.place_name }}</td>
        <td>{{ i.contact }}</td>
        <td>{{ i.job }}</td>
        <td>{{ i.phone }}</td>
        <td>{{ i.gender }}</td>
        <td>{{ i.fax }}</td>
        <td>{{ i.bank }}</td>
        <td v-for="e in data3" v-if="e.id==i.postcode">{{ e.postcode }}</td>
        <td>{{ i.scale }}</td>
        <td v-for="r in data2" v-if="r.id==i.clerk">{{ r.clerk_name }}</td>
        <td>{{ i.is_show }}</td>
        <td>{{ i.date }}</td>
        <td>
          <button @click="del(i.id)">删除</button>
          <button @click="amend(i.id)">修改</button>
        </td>
      </tr>
    </table>

    <br><br><br><br>

    <form action="" @submit.prevent="add" v-model="form">
      <p>公司名称:
        <select v-model="form.company_name">
          <option :value="i.id" v-for="i in data1">{{ i.company_name }}</option>
        </select></p>
      <p>主营业务: <input type="text" v-model="form.business"></p>
      <p>地区:
        <select v-model="form.region">
          <option :value="j.id" v-for="j in data3">{{ j.place_name }}</option>
        </select></p>
      <p>联系人: <input type="text" v-model="form.contact"></p>
      <p>联系人职务: <input type="text" v-model="form.job"></p>
      <p>联系人电话: <input type="number" v-model="form.phone"></p>
      <p>联系人性别: <input type="text" v-model="form.gender"></p>
      <p>传真号码: <input type="text" v-model="form.fax"></p>
      <p>银行账号: <input type="text" v-model="form.bank"></p>
      <p>邮政编码:
        <select v-model="form.postcode">
          <option :value="k.id" v-for="k in data3">{{ k.postcode }}</option>
        </select></p>
      <p>公司规模: <input type="text" v-model="form.scale"></p>
      <p>业务员:
        <select v-model="form.clerk">
          <option :value="l.id" v-for="l in data2">{{ l.clerk_name }}</option>
        </select></p>
      <p>客户状态: <input type="text" v-model="form.is_show"></p>
      <p>加入时间: <input type="date" v-model="form.date"></p>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      data1: [],
      data2: [],
      data3: [],
      form: {}
    }
  },
  methods: {
    btn() {
      this.axios.get('clientM/')
        .then(res => {
          this.data = res.data
        })
    },
    btn1() {
      this.axios.get('billM/')
        .then(res => {
          this.data1 = res.data
        })
    },
    btn2() {
      this.axios.get('clerkM/')
        .then(res => {
          this.data2 = res.data
        })
    },
    btn3() {
      this.axios.get('regionM/')
        .then(res => {
          this.data3 = res.data
        })
    },
    add() {
      this.axios.post('clientM/', this.form)
        .then(res => {
          alert('添加成功')
          this.form = {}
          this.btn()
        })
    },
    del(id) {
      this.axios.delete('clientM/?id=' + id)
        .then(res => {
          alert('删除成功')
          this.btn()
        })
    },
    amend(id) {
      this.$router.push({'path': '/showClient', query: {id: id}})
    }
  },
  mounted() {
    this.btn()
    this.btn1()
    this.btn2()
    this.btn3()
  }
}
</script>

<style scoped>

</style>
